<template>
  <div class="picker-container">
    <van-cell
      :title="title"
      :border="border"
      :title-width="titleWidth"
      :required="required"
      :value-class="valueClass"
    >
      <picker
        mode="date"
        @change="bindDateChange"
        @cancel="bindDateCancel"
        :value="date"
        :start="start"
        :end="end"
        :fields="fields"
        ref="others"
      >
        <slot name="others">
          <view
            class="picker-value"
            v-if="date"
          > {{date}} </view>
          <view
            class="picker-value"
            v-else
          > {{placeholder}} </view>
        </slot>
      </picker>
    </van-cell>
  </div>
</template>

<script>
// import Vue from 'vue'
export default {
  props: {
    label: {
      type: String,
      default: '日期'
    },
    // 当前日期
    value: {
      type: String,
      default: ''
    },
    // 最小日期
    start: {
      type: String,
      default: ''
    },
    // 最大日期
    end: {
      type: String,
      default: ''
    },
    // 日期最小层级
    fields: {
      type: String,
      default: 'day'
    },
    // 日期最小层级
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    titleWidth: {
      type: String
    },
    valueClass: {
      type: String
    },
    required: Boolean,
    border: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      title: '',
      date: ''
    }
  },
  mounted () {
    this.title = this.label
    this.date = this.value
    console.log(this.date)
  },

  onLoad (option) {
    console.log('_____________onLoad')
  },
  created () {
    console.log('_____________created')
  },

  methods: {
    notice () {
      this.$emit('change', this.date)
    },
    bindDateChange (e) {
      console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.date = e.mp.detail.value
      this.notice()
    },
    bindDateCancel (e) {
      // this.notice()
    }
  }
}
</script>

<style lang="less">
.picker-container {
  
}
</style>